<div class="dialog-container mdl-shadow--8dp mdl-layout--fixed-header SMES-dialog logging-dialog">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="dialog.triggerSettingPage();">
            <i class="material-icons" ng-hide="dialog.mode == 'list'">&#xE408;</i>
            <i class="material-icons" ng-show="dialog.mode != 'setting'">settings</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'logging.title_'+ dialog.mode | translate"></div>
        <div class="kmi-side-btn right" ng-click="dialog.back();">
            <img src="image/icons/clear.png"></img>
            <div class="kmi-can-click"></div>
        </div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page" ng-show="dialog.mode == 'setting'">
            <div class="kmi-text-fields" style="margin-top: 4px;">
                <label class="label" ng-bind="'logging.log_level' | translate"></label>
                <input ng-model="dialog.log_level" readonly="readonly" ng-click="dialog.loadLogLevel();" style="flex:0 0 120px;">
                <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
            </div>
            <div class="kmi-text-fields">
                <label class="label" ng-bind="'logging.log_path' | translate"></label>
                <label class="value" ng-bind="dialog.log_path" style="word-break: break-word; border-bottom: solid 1px; border-color: #929292;"></label>
                <div class="mdl-button mdl-js-button mdl-button--icon mdl-button--icon_prime">
                    <i class="material-icons">open_in_new</i>
                    <div class="kmi-can-click" ng-click="dialog.openLogPath();"></div>
                </div>
            </div>
            <div class="kmi-text-fields">
                <label class="label" ng-bind="'logging.days' | translate"></label>
                <input class="value" readonly="readonly" ng-model="dialog.days" ng-click="dialog.changeSaveDays($event)" style="flex:0 0 44px;"></input>
                <label class="unit" ng-bind="'logging.days_unit' | translate"></label>
            </div>
            <div style="flex: 1;"></div>
            <div class="btn-panel">
                <div class="kmi-button kmi-button-confrim btn-confirm" style="width:100px" ng-click="dialog.saveSetting()">
                    <label ng-bind="'logging.save_setting' | translate"></label>
                    <div class="kmi-can-click"></div>
                </div>
            </div>
        </div>
        <div class="kmi-layout-page" ng-show="dialog.mode == 'list'">
            <div class="kmi-text-fields">
                <!-- <label class="label" ng-bind="'logging.detail' | translate" style="font-size: 24px;"></label> -->
                <label class="label" ng-bind="'logging.total_size' | translate"></label>
                <label class="value" ng-bind="dialog.total_size" style="flex: 0;"></label>
                <label class="unit" ng-bind="'logging.used_size_unit' | translate"></label>
            </div>
            <div class="kmi-list">
                <div class="kmi-list__header">
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="order" ng-hide="dialog.file_name_filter">
                            <i class="material-icons search" style="z-index:1;" ng-click="dialog.file_name_filter = true">search</i>
                            <label ng-bind="'logging.list.column1' | translate"></label>
                            <i class="material-icons">{{!dialog.file_name_oderBy?'&#xE5D8;':'&#xE5DB;'}}</i>
                            <div class="kmi-can-click" ng-click="dialog.file_name_oderBy = !dialog.file_name_oderBy"></div>
                        </div>
                        <div class="filter" ng-show="dialog.file_name_filter">
                            <input ng-model="dialog.file_name_filter_s">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 0px;" ng-show="dialog.file_name_filter"
                                ng-click="dialog.file_name_filter = false;dialog.file_name_filter_s=''">clear</i>
                        </div>
                    </div>
                    <div class="kmi-list__column" style="flex:0 0 120px;" ng-bind="'logging.list.column2' | translate"></div>
                    <div class="kmi-list__column" style="flex:0 0 36px;"></div>
                    <div class="kmi-list__column" style="flex:0 0 36px;"></div>
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in dialog.recordList | filter : { file_name : dialog.file_name_filter_s} | orderBy : 'file_name' : !dialog.file_name_oderBy track by $index">
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.file_name"></div>
                        <div class="kmi-list__column column-border" style="flex:0 0 120px;" ng-bind="item.file_size+' KB'"></div>
                        <div class="kmi-list__column column-border" style="flex:0 0 36px;">
                            <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--icon_prime" ng-click="dialog.openLog(item);">
                                <img src="image/icons/search2.png"></img> 
                            </button>
                        </div>
                        <div class="kmi-list__column" style="flex:0 0 36px;">
                            <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--icon_prime" ng-click="dialog.deleteLog(item);" style="background:#db4b3c;">
                                <img src="image/icons/delete2.png"></img>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn-panel">
                <div class="kmi-button kmi-button-cancel" ng-click="dialog.deleteAllLog();" style="flex: 0 0 100px;">
                    <label class="label" ng-bind="'logging.delete_all_log' | translate"></label>
                    <div class="kmi-can-click"></div>
                </div>
            </div>
        </div>
    </div>
</div>
